// export default function Event(){

import { useState } from "react"

//     let msg = '你好，孟凡宇'
//     const fn = () => {
//         msg = '你好，孟庆明'
//         console.log('hhhhhha',msg);
//     }                     

//     return(
//         <>
//             <h1>{msg}</h1>
//             {/* <button onclick="fn()">改名</button> */}
//             {/* onClick后面接的是函数体，不能是函数调用 */}
//             <button onClick={fn}>改名</button>
//         </>
//     )
// }

// useState能够让react中的函数组件拥有状态和修改状态
// 使用react的状态hook：const [变量名，修改该变量的方法名] = useState(初始值)
export default function Event(){
    // useState等所有的hooks必须在组件最外层调用
    const [msg,setMsg] = useState('你好，孟凡宇')
    const fn = () => {
        // setMsg('你好，孟庆明1') //较为常用，但是在某些特定场景下需要拿到之前的状态
        setMsg(pre => {
            return pre + '你是谁他爹？'
        })
    }                     

    return(
        <>
            <h1>{msg}</h1>
            {/* <button onclick="fn()">改名</button> */}
            {/* onClick后面接的是函数体，不能是函数调用 */}
            <button onClick={fn}>改名</button>
        </>
    )
}